<template>
  <div class="search">
    <div class="top">
      <div class="top-one" @click="back">
        <img src="../images/leftjiantou.png" alt="" />
      </div>
      <div class="top-two">
        <input type="text" placeholder="九阳榨汁机" v-model="message" />
        <img src="../images/sousuo.png" alt="" />
      </div>
      <div class="top-right">
        <a :href="url">
          <button @click="qingkong">搜索</button>
        </a>
      </div>
    </div>
    <div class="list" v-show="seen2" @click="qingkong">
      <div v-for="item in list1" :key="item.key" class="list-box">
        <a :href="item.url">
          <div class="list-box-first">{{ item.key }}</div>
          <div class="list-box-div">
            <div
              v-for="item1 in item.tag"
              :key="item1.tsh"
              class="list-box-second"
            >
              {{ item1.tsh }}
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="middle">
      <div class="middle-top">
        <div class="middle-top-rm">热门搜索</div>
        <div class="middle-top-yc" @click="yincang">{{ test }}</div>
      </div>
      <div class="middle-main">
        <div v-show="seen1" class="yincang">已隐藏搜索发现</div>
        <div
          href=""
          v-for="item in list"
          :key="item.id"
          class="middle-main-box"
          v-show="seen"
        >
          <div class="middle-main-box-div">{{ item.txt }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      seen: true,
      seen1: false,
      test: "隐藏",
      message: "",
      timer: null,
      list1: [],
      seen2: false,
      url: "",
    };
  },
  methods: {
    qingkong(){
        this.message=""
    },
    getlist() {
      let that = this;
      this.axios.get("./data/index.json").then(function (response) {
        that.list = response.data.Search.reimenlist;
      });
    },
    yincang() {
      if (this.seen == true) {
        this.seen = false;
        this.test = "显示";
        this.seen1 = true;
      } else {
        this.seen = true;
        this.test = "隐藏";
        this.seen1 = false;
      }
    },
    getlist1(newval) {
      let that = this;
      if (newval == "小米") {
        this.axios.get("./data/index.json").then(function (response) {
          that.list1 = response.data.Search.xiaomi;
          that.seen2 = true;
          that.url = that.list1[0].url;
        });
      } else if (newval == "华为") {
        this.axios.get("./data/index.json").then(function (response) {
          that.list1 = response.data.Search.huawei;
          that.seen2 = true;
          that.url = that.list1[0].url;
        
        });
      } else {
        that.seen2 = false;
        that.list1 = [];
      }
    },
    back() {
      this.$router.go(-1);
      this.message=""
    },
   
  },
  created() {
    this.getlist();
   
  },
  watch: {
    message(newval) {
      let that = this;
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      this.timer = setTimeout(function () {
        that.getlist1(newval);
      }, 1000);
    },
  },
};
</script>
<style scoped>
.search {
  position: relative;
  overflow: hidden;
}
.top {
  height: 2.8rem;
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 1rem;
  text-decoration: none;
  color: #252525;
  overflow: hidden;
  border-bottom: solid 0.03125rem rgb(229, 229, 229);

  background-color: rgb(255, 255, 255);
  z-index: 999;
}
.top-one {
  width: 2.5rem;
  height: 2.8rem;
}
.top-one img {
  margin: 0.75rem 0 0 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.top-two {
  width: 13.625rem;
  height: 2.75rem;
  margin-right: 0.625rem;
  overflow: hidden;
  position: relative;
}
.top-two input {
  width: 168px;
  border: none;
  background: #f7f7f7;
  border-radius: 0.9375rem;
  overflow: hidden;
  height: 1.875rem;
  margin-bottom: 0.4375rem;
  padding-left: 2.5rem;
  padding-right: 0.625rem;
  font-size: 0.75rem;
  position: absolute;
  top: 0.4375rem;
  left: 0;
  line-height: 1.875rem;
  outline: none;
}
.top-two img {
  height: 1.125rem;
  width: 1.125rem;
  z-index: 1;
  position: absolute;
  left: 0.9375rem;
  top: 0.8125rem;
}
.top-right {
  position: relative;
}
.top-right button {
  /* padding: 6px; */
  width: 2.5rem;
  border: none;
  height: 1.75rem;
  box-sizing: border-box;
  background-color: #e93b3d;
  color: #fff;
  border-radius: .25rem;
  font-size: .875rem;
  /* line-height: 44px; */
  position: absolute;
  top: .5rem;
  left: -0.125rem;
  cursor: pointer;
}
.middle {
  margin-bottom: 0;
  padding-left: .8125rem;
  margin-top: .9375rem;
  font-size: 1.0625rem;
  width: 19.1875rem;
  height: 10.0625rem;
}
.middle-top {
  padding: .1875rem .9375rem .6875rem 0;
  width: 19.1875rem;
  height: .9375rem;

  display: flex;
}
.middle-top-rm {
  font-size: .9375rem;
  line-height: .9375rem;
  color: #232326;
  float: left;
  width: 16.25rem;
  padding-left: .0625rem;
  height: .9375rem;
}
.middle-top-yc {
  color: #999;
  font-size: .9375rem;
  height: .9375rem;
  line-height: .9375rem;
}
.middle-main {
  padding-right: .125rem;
  overflow: hidden;
  font-size: .75rem;
  text-align: center;
  width: 19.0625rem;
  height: 8.25rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.middle-main-box {
  height: 1.4375rem;
  line-height: 1.5rem;
  border-radius: .1875rem;
  width: auto;
  color: #686868;
  background-color: #f0f2f5;
  padding-left: .8125rem;
  margin-right: .8125rem;
  box-sizing: border-box;
}
.middle-main-box-div {
  padding-right: .625rem;
  padding-bottom: .625rem;

  font-size: .75rem;

  text-align: center;
}
.yincang {
  height: 1.875rem;
  margin: 1.8125rem auto 2.5rem;
  line-height: 1.875rem;
  text-align: center;
  color: #999;
  font-size: .75rem;
}
.list {
  padding-left: .75rem;
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  width: 20rem;
  height: 36.75rem;
}
.list-box {
  height: 2.625rem;
  position: relative;
  padding-right: .75rem;
  box-sizing: border-box;
  border: 0;
  margin-left: .75rem;
  position: relative;
  overflow-x: hidden;
  height: 2.625rem;

  display: flex;
  justify-content: space-between;
  line-height: 2.625rem;
  border-bottom: .03125rem solid rgb(249, 250, 251);
}
.list-box-first {
  color: #232326;
  font-size: .8125rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: auto 0;
}
.list-box-second {
  color: #686868;
  font-size: .75rem;
  display: block;
  height: 1.4375rem;
  padding-left: .625rem;
  padding-right: .625rem;
  background-color: #f0f2f5;
  border-radius: .1875rem;
  line-height: 1.4375rem;

  overflow: hidden;

  margin-right: .625rem;
}
.list-box-div {
  height: 2.5625rem;
  display: flex;
  align-items: center;
}
a {
  text-decoration: none;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  justify-content: space-between;
}
</style>
